﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="">
    <title>Login</title>

    <!-- ############################################################################################################################################################### -->
    <!-- APPLICATION STYLE ------------------------------------------------------------------------------------------------------------------------------------------------------>
    <!-- ############################################################################################################################################################### -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Bootstrap -->
    <link href="lib/bootstrap.min.css" rel="stylesheet">
    <link href="http://www.bootstrap-switch.org/docs/bootstrap-switch.css" rel="stylesheet">

    <!-- Custom styles for this App -->
    <link href="assets/app.css" rel="stylesheet">

    <!-- Style JQueryUI-->
    <link href="./lib/jqueryui/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
    
    
    <!-- ############################################################################################################################################################### -->
    <!-- FRAMEWORKS ------------------------------------------------------------------------------------------------------------------------------------------------------->
    <!-- ############################################################################################################################################################### -->

    <script src="./lib/jquery-1.11.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
    <script src="./lib/underscore.js"></script>
    <script src="./lib/backbone.js"></script>
    <script src="./lib/backbone.marionette.js"></script> 
    <script src="./lib/bootstrap.min.js"></script>
    <script src="http://www.bootstrap-switch.org/docs/bootstrap-switch.js"></script>

    <!-- JQuery UI -->
    <script src="./lib/jqueryui/js/jquery-ui-1.10.4.custom.min.js"></script>

    <!-- ############################################################################################################################################################### -->
    <!-- COMPONENTS ------------------------------------------------------------------------------------------------------------------------------------------------------->
    <!-- ############################################################################################################################################################### -->
    
    <script src="assets/components/sessions.js"></script>

    <!-- ############################################################################################################################################################### -->
    <!-- APPLICATION (The right import order is important)--------------------------------------------------------------------------------------------------------->
    <!-- ############################################################################################################################################################### -->
    <script src="assets/router.js"></script>
    <script src="assets/application.js"></script>

    <script src="assets/view/LoginViews.js"></script>
    <script src="assets/view/NavBarViews.js"></script>
    <script src="assets/view/SidebarViews.js"></script>
    <script src="assets/view/NewEntryViews.js"></script>
    <script src="assets/model/Category.js"></script>
    <script src="assets/model/Daily.js"></script>
    <script src="assets/model/User.js"></script>
    <script src="assets/modules/LoginModule.js"></script>
    <script src="assets/modules/NewEntryModule.js"></script>
    
    <!-- ############################################################################################################################################################### -->
    <!-- PAGE STRUCTURE --------------------------------------------------------------------------------------------------------------------------------------------------->
    <!-- ############################################################################################################################################################### -->

</head>
<body>
    
    <div class="container-fluid" style=" width: 100%;">
        <header id="headerRegion" class="ml-nospace"> </header>

        <div class="container-fluid ml-main-container" >
            <div class="row-fluid ml-nospace">

                <div class=" pull-left ml-sidebar" >
                    <div id="sidebarRegion"></div><br />
                    <div class="ml-padding_small ml-rounded" style="background:#dbdbdb"><script type="text/javascript" src="http://www.brainyquote.com/link/quotefu.js"></script></div>   </div>
                <div class=" pull-left ml-main" id="mainRegion"> <!-- col-xs-12 col-sm-6 col-md-8 col-md-offset-3  --> </div>
                <div style="clear: both;">
            </div>
            <footer id="footerRegion"> </footer>
        </div>

        <!-- ############################################################################################################################################################### -->
        <!-- TEMPLATES -------------------------------------------------------------------------------------------------------------------------------------------------------->
        <!-- ############################################################################################################################################################### -->
        
        <!-- LoginView -->
        <script type="text/template" id="Login-template">
            <form class="form-signin" role="form" action="#/default">
                <h2 class="form-sigin-heading">Please sign in</h2>
                <h4><font color="#B80000" id="LoginView_label"></font></h4>
                <input type="email" class="form-control" placeholder="Email address" id="LoginView_email" required autofocus>
                <input type="password" class="form-control" placeholder="Password" id="LoginView_password" required>
                <button class="btn btn-lg btn-primary btn-block" type="submit" id="LoginView_submit">Sign in</button>
            </form>
        </script>

        <!-- NavBar -->
        <script type="text/template" id="NavBar-template">
            <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">MyLife</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Manage Categories</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->

            </div>
        </script>

        <!-- Sidebar -->
        <script type="text/template" id="Sidebar-template">
            <div style="background:#dbdbdb" class=" ml-rounded">
                </br>
                <div class="text-center"><a href="#"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></span> New Entry</button></a></div>
                </br>
                <!--
                <div class="text-center"><a href="#"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-th-list"></span> History</button></a></div>
                </br>
                <div class="text-center"><a href="#"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-signal"></span> Analytics</button></a></div>
                </br>
                -->
            </div>
        </script>

        <!-- NewEntry: CategoryItem -->
        <script type="text/template" id="NewEntry_Category-template">
            <div style="height: 70px" >
                <h3><%- name %></h3>
                <div>
                    <div class="pull-left" id="sliderContainer" style="width: 100px; margin: 20px;"></div>
                    <label id="amount" style="padding-top: 15px;"><%- value %> </label>
                    <label style="padding-top: 15px;"><%- unity %></label>
</div>
            </div>
        </script>

        <!-- NewEntry: Categories -->
        <script type="text/template" id="NewEntry_Categories-template">
            <div class="ml-padding_small ml-rounded" style="background:#ffffff" >
                    <h2 class="page-header" style="margin: 0px;"> Informationen</h2>
                    <br />
                    <div id="categoryContainer">
                    </div>
            </div>
        </script>

        <!-- Categories: Module Layout -->
        <script type="text/template" id="Categories_Layout-template">
            <div class="ml-padding_small ml-rounded"
        </script>
        <!-- NewEntry: ModuleLayout -->
        <script type="text/template" id="NewEntry_Layout-template">

                    <h1 class="page-header"  style="margin: 0px;">Es ist <span id="date" style="color:green;"></span> Uhr.</h1>
                    <br />
                    <label>Der Eintrag wird für gestern erstellt ? (Bsp.: nach 00:00 Uhr)</label><br />
                    <input type="checkbox" data-size="large" id="switch">
                    <br />
                <!-- <div style="overflow: auto;  height: 80%; height-min: 50px;"> -->
                    <form role="form" class="">
                    <div class="ml-main-canvas" id="NewEntry_Layout-daily">
                            <div class="col-md-4 pull-left ml-margin_space"><label>Aufgestanden: </label></div>
                            <div class="col-md-2 pull-left"><input type="text" class="form-control" placeholder="00" id="NewEntry_Layout-wakeup-h" required></div>
                            <div class="pull-left ml-margin_space"><label>:</label></div>
                            <div class="col-md-2 pull-left"><input type="text" class="form-control" placeholder="00" id="NewEntry_Layout-wakeup-m"  required></div>
                            <div class="pull-left ml-margin_space"><label>Uhr</label></div>
                            <div style="clear: both;"></div>
                            <div class="col-md-4 pull-left ml-margin_space"><label>Schlafen gegangen: </label></div>
                            <div class="col-md-2 pull-left"><input type="text" class="form-control" placeholder="00" id="NewEntry_Layout-sleep-h"  required></div>
                            <div class="pull-left ml-margin_space"><label>:</label></div>
                            <div class="col-md-2 pull-left"><input type="text" class="form-control" placeholder="00" id="NewEntry_Layout-sleep-m"  required></div>
                            <div class="pull-left ml-margin_space"><label>Uhr</label></div>
                            <div style="clear: both;"></div>
                            <div class="col-md-4 pull-left ml-margin_space"><label>Motivation morgens: </label></div>
                            <div class="col-md-4 pull-left ml-margin_space" id="NewEntry_Layout-motivation"></div>
                            <div class="pull-left ml-margin_space ml-padding_small_sides" id="NewEntry_Layout-motivationValue"><label> <%- MyApp.NewEntryModule.daily.get('motivation') %></label></div>
                            <div style="clear: both;"></div>
                            <div class="col-md-4 pull-left ml-margin_space"><label>Zufriedenheit: </label></div>
                            <div class="col-md-4 pull-left ml-margin_space" id="NewEntry_Layout-satisfaction"></div>
                            <div class="pull-left ml-margin_space ml-padding_small_sides" id="NewEntry_Layout-satisfactionValue"><label> <%- MyApp.NewEntryModule.daily.get('satisfaction') %></label></div>
                            <div style="clear: both;"></div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="ml-nospace ml-margin_space">
                        <div id="NewEntry_Layout-categories">
                        </div>
                        <div class="container-fluid col-xs-2 ml-margin_space">
                            <button class="btn btn-lg btn-primary btn-block" type="submit" id="NewEntry_Categories-save" onclick="return false">Save</button>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </script>
            

    </div>
</body>
</html>
